<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>誉禾植物店</title>
  <!-- bootstrap样式 -->
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- element-ui的样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="../css/common.css">
  <!-- vue2框架的js和emenet-ui的js -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 可以发送jquery请求 -->
  <script src="../js/jquery.min.js"></script>
  <!-- bootstrap框架 -->
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <!-- js动画 -->
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <!-- 用于发送请求 -->
  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<!-- 新闻资讯 -->
<style>
  @media (min-width: 1200px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
      max-width: 1200px;
    }
  }

  .el-tabs__nav-scroll {
    padding-left: 34%;
  }
</style>

<body>
  <div id="news">
    <!-- 网页头部 -->
    <header>
      <iframe src="./header.html" height="110px" width="100%" frameborder="0"></iframe>
    </header>
    <!-- 网页内容 -->
    <section>
      <div style="width: 100%; height: 400px; overflow: hidden;">
        <img src="../img/slider-home-v1.jpg" width="100%" alt="">
      </div>
    </section>
    <!-- 新闻资讯 -->
    <section style="padding-top: 3%;">
      <div class="container">
        <div style="text-align: center;">
          <div>
            <img src="../img/object-09.png" alt="">
          </div>
          <div style="display: flex; margin-top: 2%;">
            <div style="margin: auto;">
              <img src="../img/line.jpg" height="6px" width="329px" alt="">
            </div>
            <div style="margin: auto;">
              <h1 style="font-weight: 600;margin: auto;">NEWS INFORMATION</h1>
            </div>
            <div style="margin: auto;">
              <img src="../img/line.jpg" height="6px" width="329px" alt="">
            </div>
          </div>
          <div style="margin-top: 1%;margin-bottom: 2%;">
            <h5 style="color: rgb(142, 179, 89);font-weight: 600;">- 新闻资讯 -</h5>
          </div>
        </div>
        <!-- 新闻 -->
        <div style="margin-bottom: 3%;">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="行业资讯" name="行业资讯" value="行业资讯">
              <div v-if="flag" class="container">
                <div class="tabs_nav_div" v-for="item in tableData">
                  <div class="tabs_nav_div_div">
                    <h4 style="text-align: center; font-weight: 600;margin-top: 5px;">{{ item.createTime.slice(8) }}
                    </h4>
                    <span style="font-size: 12px;font-weight: 600;">{{ item.createTime.slice(0,7) }}</span>
                  </div>
                  <div style="margin-left: 15px; padding-top: 10px;">
                    <h5><a class="tabs_h5_a" href="#" style="font-size: 18px; " @click="aClick(item)">{{item.title}}</a>
                    </h5>
                    <span style="font-size: 12px;color: #999;"> {{ item.ntoes }}</span>
                  </div>
                </div>
                <div style="margin-top: 2%; text-align: center;">
                  <el-pagination background layout="prev, pager, next" :current-page="current" :total="total"
                    @current-change="currentPage" :page-size="6">
                  </el-pagination>
                </div>
              </div>
              <div v-else class="container">
                <h6 style="font-weight: 600; text-align: center;">{{ruleForm.title}}</h6>
                <div style="margin-top: 2%;border: 1px solid #E5E5E5;padding-left: 15px;">
                  <span style="color: #999;font-size: 12px;">{{ ruleForm.ntoes }}</span>
                </div>
                <div style="margin-top: 3%;font-size: 12px;">
                  <p>{{ ruleForm.message }}</p>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="公司新闻" name="公司新闻" value="公司新闻">
              <div v-if="flag" class="container">
                <div class="tabs_nav_div" v-for="item in tableData">
                  <div class="tabs_nav_div_div">
                    <h4 style="text-align: center; font-weight: 600;margin-top: 5px;">{{ item.createTime.slice(8) }}
                    </h4>
                    <span style="font-size: 12px;font-weight: 600;">{{ item.createTime.slice(0,7) }}</span>
                  </div>
                  <div style="margin-left: 15px; padding-top: 10px;">
                    <h5><a class="tabs_h5_a" href="#" style="font-size: 18px; " @click="aClick(item)">{{item.title}}</a>
                    </h5>
                    <span style="font-size: 12px;color: #999;"> {{ item.ntoes }}</span>
                  </div>
                </div>
                <div style="margin-top: 2%; text-align: center;">
                  <el-pagination background layout="prev, pager, next" :current-page="current" :total="total"
                    @current-change="currentPage" :page-size="6">
                  </el-pagination>
                </div>
              </div>
              <div v-else class="container">
                <h6 style="font-weight: 600; text-align: center;">{{ruleForm.title}}</h6>
                <div style="margin-top: 2%;border: 1px solid #E5E5E5;padding-left: 15px;">
                  <span style="color: #999;font-size: 12px;">{{ ruleForm.ntoes }}</span>
                </div>
                <div style="margin-top: 3%;font-size: 12px;">
                  <p>{{ ruleForm.message }}</p>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="媒体报道" name="媒体报道" value="媒体报道">
              <div v-if="flag" class="container">
                <div class="tabs_nav_div" v-for="item in tableData">
                  <div class="tabs_nav_div_div">
                    <h4 style="text-align: center; font-weight: 600;margin-top: 5px;">{{ item.createTime.slice(8) }}
                    </h4>
                    <span style="font-size: 12px;font-weight: 600;">{{ item.createTime.slice(0,7) }}</span>
                  </div>
                  <div style="margin-left: 15px; padding-top: 10px;">
                    <h5><a class="tabs_h5_a" href="#" style="font-size: 18px; " @click="aClick(item)">{{item.title}}</a>
                    </h5>
                    <span style="font-size: 12px;color: #999;"> {{ item.ntoes }}</span>
                  </div>
                </div>
                <div style="margin-top: 2%; text-align: center;">
                  <el-pagination background layout="prev, pager, next" :current-page="current" :total="total"
                    @current-change="currentPage" :page-size="6">
                  </el-pagination>
                </div>
              </div>
              <div v-else class="container">
                <h6 style="font-weight: 600; text-align: center;">{{ruleForm.title}}</h6>
                <div style="margin-top: 2%;border: 1px solid #E5E5E5;padding-left: 15px;">
                  <span style="color: #999;font-size: 12px;">{{ ruleForm.ntoes }}</span>
                </div>
                <div style="margin-top: 3%;font-size: 12px;">
                  <p>{{ ruleForm.message }}</p>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </section>
    <!-- 网页尾部 -->
    <footer>
      <iframe src="./footer.html" width="100%" height="400px" frameborder="0"></iframe>
    </footer>
  </div>
</body>
<script>
  new Vue({
    el: '#news',
    data() {
      return {
        activeName: '行业资讯',
        flag: true,
        tableData: [],
        ruleForm: {},
        shopForm: {},
        current: 1,
        total: 1,
      };
    },
    created() {
      this.page_init();
    },
    methods: {
      // 当点击分类时调用
      handleClick(el) {
        this.activeName = el.$attrs.value;
        this.flag = true
        this.current = 1;
        this.page_init();
      },
      // 初始化
      async page_init() {
        const { data: result } = await this.$http.get('http://localhost:9081/plants_news/type/' + this.activeName + '/' + this.current);
        if (result.flag) {
          // 促销活动的数据
          this.tableData = result.list;
          // 分割字符串
          for (let i = 0; i < this.tableData.length; i++) {
            let time = this.tableData[i].createTime;
            this.tableData[i].createTime = time.slice(0, 10)
          }
          // 当前页面
          this.current = result.current;
          // 总条数
          this.total = result.total;
        }
      },
      // 当切换页面时调用
      currentPage(val) {
        this.current = Number(val);
        this.page_init();
      },

      // 查看文章详情
      aClick(item) {
        this.ruleForm = {}
        this.flag = false;
        this.ruleForm = item;
      }
    }
  })
</script>

</html>